<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>
    <body>
        <div class="row">
            <div class="col-xs-12 col-md-8">
                <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
            </div>
            <div class="col-xs-6 col-md-4">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="length" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="length" placeholder="长">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="width" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="width" placeholder="宽">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="height" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="height" placeholder="高">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Sign in</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>



        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>

        <script>
            var camera, scene, renderer;
            var geometry, material, mesh;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
                camera.position.z = 1;

                scene = new THREE.Scene();

                geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
                material = new THREE.MeshNormalMaterial();

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

            }

            function animate() {

                requestAnimationFrame( animate );

                mesh.rotation.x += 0.01;
                mesh.rotation.y += 0.02;

                renderer.render( scene, camera );

            }
            jQuery(function($){

            });
        </script>
    </body>
</html>